// https://codesandbox.io/s/vtable-columns-nested-structure-4zwk43


import { ListTable, themes } from "@visactor/vtable";

const columns = [
  {
    field: "",
    caption: "Company",
    columns: [
      {
        field: "",
        caption: "Human Resources Department",
        width: 120,
        columns: [
          {
            field: "RecruitingDep",
            caption: "Recruiting Group",
            width: 120
          },
          {
            field: "TrainingDep",
            caption: "Training Group",
            width: 120
          }
        ]
      },
      {
        field: "",
        caption: "Marketing Department",
        width: 120,
        columns: [
          {
            field: "AdvertisingDep",
            caption: "Advertising Group",
            width: 120
          },
          {
            field: "MarketDep",
            caption: "Market Research Group",
            width: 120
          }
        ]
      },
      { field: "FinanceDep", caption: "Finance Department" }
    ]
  }
];
const option = {
  container: document.getElementById("container"),
  widthMode: "autoWidth",
  records: [
    {
      RecruitingDep: "10 persons",
      TrainingDep: "3 persons",
      AdvertisingDep: "13 persons",
      MarketDep: "23 persons",
      FinanceDep: "10 persons"
    }
  ],
  columns,
  theme: themes.DEFAULT.extends({
    headerStyle: {
      textAlign: "center"
    }
  })
};
const tableInstance = new ListTable(option);
window["tableInstance"] = tableInstance;
